<template>
  <div class="item-manage-container">
    <div class="item-manage-container-right">
      <div class="page-header">
        <div class="page-header-title">情形管理</div>
        <div class="page-header">
          <div class="page-header-button flex-center">
            <el-button :type="showType === 'icon' ? 'primary' : ''" @click="changeShowType('icon')">
              <div class="flex-center">
                <i class="iconfont icon-tubiao"></i>
                图标展示
              </div>
            </el-button>
            <el-button :type="showType === 'table' ? 'primary' : ''" @click="changeShowType('table')">
              <div class="flex-center">
                <i class="iconfont icon-table"></i>
                列表展示
              </div>
            </el-button>
          </div>
        </div>
      </div>
      <div class="context">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="24">
              <el-form-item style="margin-right: 60px" label="情形名称：" v-show="level == 1">
                <el-input v-model="formInline.name" placeholder="请输入情形名称" clearable></el-input>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="primary" @click="onSubmit" style="width: 120px" v-show="level == 1">搜索</el-button>
                <el-button type="primary" @click="openAddSituation()" style="width: 120px" v-show="level == 1">
                  新建
                </el-button>
                <el-button type="primary" plain @click="returnStep()" style="width: 120px" v-show="level == 2">
                  返回
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-show="showType === 'table'" class="tableBox" style="padding: 0">
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            height="100%"
            @row-contextmenu="openContextMenu"
          >
            <el-table-column prop="thingName" label="情形名称" show-overflow-tooltip>
              <div class="ec-name" slot-scope="scope">
                <img class="tableBox-img" src="img/itemManage/condition.png" alt />
                <span style="margin-left: 10px">{{ scope.row.situationObjectName }}</span>
              </div>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="150">
              <template slot-scope="scope">
                <span :class="['state', scope.row.state == 'Y' ? 'stateY' : '']">
                  {{ scope.row.state == 'Y' ? '在用' : '失效' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="stateDate" label="状态变更时间" width="200">
              <template slot-scope="scope">
                <span>{{ $moment(scope.row.stateDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="userId" label="操作人" width="150"></el-table-column>
          </el-table>
        </div>
        <div v-show="showType === 'icon'" class="iconBox" @contextmenu="openContextMenu(null, '', $event)">
          <div v-loading="loading">
            <div class="situationBox" v-if="level == 1">
              <div
                class="itemBox"
                v-for="item in tableData"
                :key="item.situationObjectId"
                @dblclick="getSonItem(item)"
                @contextmenu="openContextMenu(item, '', $event)"
              >
                <span :class="['state', item.state == 'Y' ? 'stateY' : '']">
                  {{ item.state == 'Y' ? '在用' : '失效' }}
                </span>
                <img src="img/itemManage/condition.png" alt />
                <el-tooltip class="item" effect="dark" placement="top" :content="item.situationObjectName">
                  <p>{{ item.situationObjectName }}</p>
                </el-tooltip>
              </div>
            </div>
            <div class="situationBox" v-if="level == 2">
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
                :content="item.situationItemName"
                v-for="item in itemData"
                :key="item.situationItemId"
              >
                <div slot="content">
                  <div>名称：{{ item.situationItemName }}</div>
                  <div style="margin-top: 6px">
                    材料：
                    <span v-for="x in item.materialObjs" :key="x.materialId" style="margin-right: 5px">
                      {{ x.materialName }}
                    </span>
                  </div>
                </div>
                <div class="itemBox" @contextmenu="openContextMenu(item, '', $event)">
                  <img src="img/itemManage/condition.png" alt />

                  <p>{{ item.situationItemName }}</p>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <ul v-show="contextmenuVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
          <li v-show="!selectItem" @click="openAddSituation">新建</li>
          <span v-show="selectItem">
            <li @click="seeItem()" v-show="level == 1">查看</li>
            <li @click="editItem()" v-show="level == 1">编辑</li>
            <li @click="takeEffect(selectItem)" v-show="level == 1">
              {{ selectItem && selectItem.state == 'Y' ? '失效' : '生效' }}
            </li>
            <li @click="delItem()" v-show="level == 1">删除</li>
          </span>
          <!-- <li @click="seeData()" v-show="level == 2">查看材料</li> -->
        </ul>
      </div>
      <div class="fenye" v-if="level == 1">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <addSituation ref="addSituation" @addSuccess="addSuccess" @openAddMaterial="openAddMaterial"></addSituation>
    <seeSituation ref="seeSituation"></seeSituation>
    <choiceMaterial ref="choiceMaterial" @setChoiceMaterial="getChoiceMaterial"></choiceMaterial>
  </div>
</template>

<script>
  import { getSituationList, delSituation, getItemData, takeEffectOrInvalid } from '@/api/situation/index';
  import addSituation from './addSituation';
  import seeSituation from './seeSituation';
  import choiceMaterial from './components/choiceMaterial';
  export default {
    data() {
      return {
        loading: false,
        contextmenuVisible: false,
        left: 0,
        top: 0,
        tableData: [],
        itemData: [],
        selectItem: '',
        formInline: {
          name: ''
        },
        level: 1, //层级
        current: 1, //当前页
        size: 20, //每页的数量
        total: 0,
        showType: 'icon'
      };
    },
    components: {
      addSituation,
      seeSituation,
      choiceMaterial
    },
    watch: {
      contextmenuVisible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeContextMenu);
        } else {
          document.body.removeEventListener('click', this.closeContextMenu);
        }
      }
    },
    methods: {
      getChoiceMaterial(opt) {
        //获取选中材料
        this.$refs.addSituation.insureAddMaterial(opt);
      },
      openAddMaterial() {
        this.$refs.choiceMaterial.showDialog = true;
        this.$refs.choiceMaterial.checkBoxGroup = [];
        this.$refs.choiceMaterial.clearTable();
      },
      seeData() {
        //查看材料
      },
      returnStep() {
        //返回上一步
        this.level = 1;
      },
      openAddSituation() {
        this.$refs.addSituation.isEdit = false;
        this.$refs.addSituation.showAdd = true;
        this.$refs.addSituation.name = '';
        this.$refs.addSituation.options = [
          {
            situationItemName: '',
            materialObjs: []
          }
        ];
      },
      seeItem() {
        this.$refs.seeSituation.showDialog = true;
        this.$refs.seeSituation.getDetails(this.selectItem);
      },
      editItem() {
        this.$refs.addSituation.isEdit = true;
        this.$refs.addSituation.showAdd = true;
        this.$refs.addSituation.getDetails(this.selectItem);
      },
      async getSonItem(opt) {
        const { data } = await getItemData(opt.situationObjectId);
        this.itemData = data.result;
        this.level = 2;
      },
      onSubmit() {
        this.current = 1;
        this.initPage();
      },
      closeContextMenu() {
        this.contextmenuVisible = false;
      },
      delItem() {
        //刪除當前情形
        if (this.selectItem) {
          this.$confirm('确认刪除当前情形？').then(() => {
            delSituation(this.selectItem.situationObjectId).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.initPage();
              }
            });
          });
        }
      },
      indexMethod(index) {
        return index + 1 + (this.current - 1) * this.size;
      },
      handleSizeChange(val) {
        this.current = 1;
        this.size = val;
        this.initPage();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.initPage();
      },
      handleMenu() {
        this.isShowTree = !this.isShowTree;
      },
      addSuccess() {
        this.current = 1;
        this.initPage();
      },
      initPage() {
        this.loading = true;
        let params = {
          name: this.formInline.name,
          current: this.current,
          size: this.size
        };
        getSituationList(params).then((res) => {
          this.loading = false;

          if (!res.data || !res.data.result) return;
          this.tableData = res.data.result && res.data.result.records;
          let { size, total, current } = res.data.result;
          this.current = current;
          this.size = size;
          this.total = total;
        });
      },
      openContextMenu(item, column, e) {
        e.stopPropagation();
        e.preventDefault();
        const menuMinWidth = 105;
        const menuMinHieght = item ? 300 : 30;
        const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
        const offsetWidth = this.$el.offsetWidth; // container width
        const offsetHeight = this.$el.offsetHeight; // container width
        const maxLeft = offsetWidth - menuMinWidth; // left boundary
        const maxTop = offsetHeight - menuMinHieght; // left boundary
        const left = e.clientX - offsetLeft + 15; // 15: margin right
        const top = e.clientY - 220;
        this.left = left > maxLeft ? maxLeft : left;
        this.top = top > maxTop ? maxTop : top;
        this.contextmenuVisible = true;
        this.selectItem = item; //右键选中的item
      },
      changeShowType(type) {
        if (this.showType === type) return;
        else {
          this.showType = type;
          //清空多选项
          this.checkBoxGroup = [];
        }
      },
      takeEffect(opt) {
        //生效或者失效
        let state = opt.state == 'Y' ? 'N' : 'Y';
        takeEffectOrInvalid(opt.situationObjectId, state).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: state == 'Y' ? '生效成功' : '失效成功',
              type: 'success'
            });
            this.initPage();
          }
        });
      }
    },
    mounted() {
      this.initPage();
    }
  };
</script>

<style lang="scss" scoped>
  .context {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    .state {
      font-size: 12px;
      color: #fff;
      padding: 2px 4px;
      background: #e6a23c;
    }
    .stateY {
      background: #5cdf11;
    }
  }
  .situationBox {
    width: 100%;
    overflow: hidden;
    flex: 1;
    display: block;
    margin-left: -16px;
    .itemBox {
      width: 100px;
      height: 130px;
      float: left;
      margin-left: 16px;
      margin-bottom: 16px;
      cursor: pointer;
      position: relative;
      img {
        width: 80px;
        height: 80px;
        display: block;
        margin: 0 auto 10px;
      }
      p {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        text-align: center;
      }
      .state {
        position: absolute;
        left: 18px;
        top: 59px;
        font-size: 12px;
        color: #fff;
        padding: 2px 4px;
        background: #e6a23c;
      }
      .stateY {
        background: #5cdf11;
      }
    }
  }
  .item-manage-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: auto;
    &-left {
      width: 300px;
      padding: 16px;
      border: 1px solid #409eff;
      border-radius: 8px;
      margin: 16px 32px 16px 16px;
      z-index: 1;
    }
    &-right {
      flex: 1;
      width: 0;
    }
    ::v-deep .el-table__expanded-cell {
      padding: 0;
    }
  }

  .fenye {
    margin: 20px 0;
    text-align: center;
  }
  .line {
    display: flex;
    background: #f3f9ff;
    border-bottom: 1px solid #fff;
    padding: 10px;
    &:last-child {
      border-bottom: 0;
    }
    .leftBox {
      flex: 1;
      i {
        width: 16px;
        height: 16px;
        text-align: center;
        color: #fff;
        background: #1e8fff;
        border-radius: 16px;
        line-height: 16px;
        display: inline-block;
        font-style: normal;
        margin-right: 10px;
        font-size: 12px;
      }
      em {
        padding: 0 10px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        display: inline-block;
        background: #1e8fff;
        font-size: 12px;
        font-style: normal;
        margin-left: 10px;
      }
    }
    .rightBox {
      a {
        color: #666;
        text-decoration: none;
      }
    }
  }
</style>
